<template>
  <el-row class="recommend">
    <MainTitle :title-name="'相关推荐'" />
    <el-row>
      <el-row class="recommend__body">
        <el-row
          v-for="(item, index) in recommend.slice(0, 3)"
          :key="index"
          class="recommend__list"
        >
          <el-image :key="index" :src="img(item.imgUrl)" fit="cover"></el-image>
          <el-row class="recommend__title">
            <nuxt-link :to="'/news/' + item.id">{{ item.title }}</nuxt-link>
          </el-row>
        </el-row>
      </el-row>
      <el-row class="recommend__body" style="margin-top:15px;">
        <el-row
          v-for="(item, index) in recommend.slice(3, 6)"
          :key="index"
          class="recommend__list"
        >
          <el-image :key="index" :src="img(item.imgUrl)" fit="cover"></el-image>
          <el-row class="recommend__title">
            <nuxt-link :to="'/news/' + item.id">{{ item.title }}</nuxt-link>
          </el-row>
        </el-row>
      </el-row>
    </el-row>
  </el-row>
</template>

<script>
import MainTitle from './MainTitle'
import { IMAGES } from '@/assets/js/settings'
export default {
  components: { MainTitle },
  props: {
    recommend: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    img(url) {
      return `${IMAGES}/${url}`
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend {
  margin-bottom: 20px;
}
.el-image {
  height: 140px;
  width: 240px;
}
.recommend__body {
  @include flexCenter($jc: space-between);
  flex-wrap: wrap;
}
.recommend__title {
  width: 240px;
  height: 40px;
  overflow: hidden;
}
</style>
